<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

import { AuthPageLayout } from '@vben/layouts';
import { preferences } from '@vben/preferences';

import { queryParamsByFieldNameApi } from '#/api';
import { getOneSpliceSepPrefix } from '#/utils';

const appName = computed(() => preferences.app.name);
const logo = computed(() => preferences.logo.source);
const result = ref({});

onMounted(async () => {
  result.value = await queryParamsByFieldNameApi({
    fieldNames: 'loginPageTitle,loginPageDescription,loginSloganImage',
  });
  result.value.loginSloganImage = getOneSpliceSepPrefix(
    result.value?.loginSloganImage,
  );
});
</script>

<template>
  <AuthPageLayout
    :app-name="appName"
    :logo="logo"
    :slogan-image="result?.loginSloganImage"
    :page-description="result?.loginPageDescription"
    :page-title="result?.loginPageTitle"
  >
    <!-- 自定义工具栏 -->
    <!-- <template #toolbar></template> -->
  </AuthPageLayout>
</template>
